<template>
  <video class="w-full h-full object-fill" :srcObject="srcObj" autoplay></video>
  <div
    class="absolute bottom-1 left-1 flex flex-row items-center justify-center gap-1 rounded p-1 bg-black/60 backdrop-blur-sm text-white"
  >
    <MicOutline class="w-[16px] h-[16px]" />
    <span> {{ info.name }}</span>
  </div>
</template>

<script setup lang="ts">
import { MicOutline } from "@vicons/ionicons5";
defineProps<{
  srcObj: MediaStream;
  info: {
    name: string;
    avatar: string;
  };
}>();
</script>

<style lang="scss" scoped></style>
